/**
 * Created by huotaol on 2017/6/7.
 */
import React, {Component} from "react";
import PropTypes from "prop-types";
import {Image, Text, TouchableOpacity, View} from "react-native";
import CustomStyle from "../../../../common/style/CustomStyle";
import {Actions} from "react-native-router-flux";

export default class CheckDetailItem extends Component {
    static propTypes = {
        click: PropTypes.func,
        title: PropTypes.string,
        normal: PropTypes.bool,
        extraStr: PropTypes.string,
        extraList: PropTypes.array,
    };

    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {};
    }

    render() {
        const {click, title, normal, extraList, extraStr} = this.props;
        const image = normal ? require('../../../../img/cardetail/normal.png') : require('../../../../img/cardetail/exception.png');
        return (
            <TouchableOpacity
                onPress={() => {
                    if (Array.isArray(extraList) && extraList.length) {
                        Actions.CheckGallery({picList: extraList});
                    }
                }}
                style={{
                    flexDirection: 'row',
                    alignItems: 'center',
                    paddingLeft: CustomStyle.getActualSizeInHorizontal(48),
                    paddingRight: CustomStyle.getActualSizeInHorizontal(30),
                    paddingTop: CustomStyle.getActualSizeInVertical(16),
                    paddingBottom: CustomStyle.getActualSizeInVertical(16),
                    justifyContent: 'space-between',
                    minHeight: CustomStyle.getActualSizeInVertical(78),
                }}>
                <Text style={[CustomStyle.baseText, {
                    fontSize: CustomStyle.getActualFontSize(30),
                    color: '#857e6e',
                    flex: 3,
                }]}>{title}</Text>
                <View style={{
                    flexDirection: 'row', flex: 1, justifyContent: 'flex-end',
                    alignItems: 'center'
                }}>
                    {this._renderExtra(extraStr, extraList)}
                    <Image source={image}
                           resizeMode={'contain'}
                           style={{
                               width: CustomStyle.getActualSizeInHorizontal(30),
                               height: CustomStyle.getActualSizeInVertical(30),
                           }}/>
                </View>
            </TouchableOpacity>
        );
    }

    _renderExtra(extraStr, extraList) {
        if (extraStr) {
            return <Text
                style={[CustomStyle.baseText, {
                    fontSize: CustomStyle.getActualFontSize(30),
                    color: '#857e6e',
                    marginRight: CustomStyle.getActualSizeInHorizontal(20),
                }]}>{extraStr}</Text>
        }
        if (Array.isArray(extraList) && extraList.length) {
            return <Image source={require('../../../../img/cardetail/check_pic.png')}
                          resizeMode={'contain'}
                          style={{
                              width: CustomStyle.getActualSizeInHorizontal(20),
                              height: CustomStyle.getActualSizeInVertical(23),
                              marginRight: CustomStyle.getActualSizeInHorizontal(20),
                          }}/>
        }
    }
}
